<template>
  <div>
    <el-card>
      <div style="padding: 0 0 20px 0;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>设备授权</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-table :data="dataList" border>
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="设备ID" prop="deviceid"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="时间">
            <template slot-scope="scope">              
              {{ moment(scope.row.createtime) }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{
                scope.row.status == 0
                  ? '待审核'
                  : scope.row.status == 1
                  ? '通过'
                  : '不通过'
              }}
            </template>
          </el-table-column>
          <el-table-column label="管理操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                v-if="scope.row.status == 0"
                @click="changeStatus(scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :total="total"
        :current-page="query.page"
        :page-size="10"
        @current-change="pageChange"
      ></el-pagination>

      <span v-show="false" v-for="(icon,index) in icons" :key="index" >
        {{icon}}
        <svg-icon  :icon-class="icon" />----
      </span>
    </el-card>
  </div>
</template>

<script>
import { review, doreview } from '@/api/equipment/index.js';
import  moment  from 'moment';
export default {
  data() {
    return {
      query: {
        page: 1,
      },
      total: 0,
      dataList: [],
      icons:[
        "alipay","anq","app","area","backup","chain","chart","codeConsole","dashboard","database","date","deploy","dept","dev",
        "develop","dictionary","doc","download","edit","education","email","error", "exit-fullscreen","fullscreen","fwb",
        "github","gonggao","icon","image","index","international","ipvisits","java","link","list","lock","log","login",
        "markdown","menu","message","mnt","money","monitor","nested","password","people","peoples","permission","phone",
        "qiniu","redis","role","search","server","shopping","size","skill","source","sqlMonitor", "Steve-Jobs","swagger", 
        "sys-tools","system","system1","tab","theme","timing","tools", "tree-table","tree","unlock","user","user1","validCode",
        "visits","web","wechat","weixin","zujian",
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    moment(time) {
      return moment(time * 1000).format('YYYY-MM-DD HH:mm:ss');
    },
    getData() {
      review(this.query).then((res) => {
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
    pageChange(page) {
      this.query.page = page;
      this.getData();
    },
    changeStatus(row) {
      this.$confirm('确定要通过吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          doreview({ id: row.id }).then((res) => {
            this.$message.success('审核成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped></style>
